<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:simple="clr-namespace:drcoderz.com.clocks.simple"
    xmlns:chrono="clr-namespace:drcoderz.com.clocks.chrono">

    <LinearGradientBrush StartPoint="0,1" x:Key="buttonGradient">
        <GradientStop Offset="0" Color="LightGray" />
        <GradientStop Offset="0.2" Color="#FF5F5F5F" />
        <GradientStop Offset="0.5" Color="White" />
        <GradientStop Offset="0.2" Color="Black" />
        <GradientStop Offset="0.8" Color="#FF5F5F5F" />
        <GradientStop Offset="0.85" Color="Black" />
        <GradientStop Offset="1" Color="White" />
    </LinearGradientBrush>

    <Style x:Key="outerNumbers" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="../chrono/BebasNeue.otf#Bebas Neue"/>
        <Setter Property="Foreground" Value="#FFFFFFFF"/>
        <Setter Property="FontSize" Value="25"/>
        <Setter Property="Effect">
            <Setter.Value>
                <DropShadowEffect Direction="0" BlurRadius="5" ShadowDepth="0"  />
            </Setter.Value>
        </Setter>
    </Style>

    <DropShadowEffect x:Key="smeff" Color="Black" ShadowDepth="1" Direction="-90" BlurRadius="1"/>

    <DropShadowEffect x:Key="smdeep" Color="Black" ShadowDepth="01.5" Direction="-90" BlurRadius="3"/>

    <LinearGradientBrush x:Key="gradientBrush" StartPoint="1,0">
        <GradientStop Offset="0" Color="#FFBABABA"/>
        <GradientStop Offset="0.5" Color="#FFFFFFFF"/>
        <GradientStop Offset="0.5" Color="LightGray"/>
        <GradientStop Offset="1" Color="Gray"/>
    </LinearGradientBrush>

    <Style x:Key="smNumberStyle" TargetType="TextBlock">
        <Setter Property="Effect" Value="{StaticResource smeff}"/>
        <Setter Property="FontSize" Value="10"/>
        <Setter Property="FontFamily" Value="Trebuchet MS"/>
        <Setter Property="Foreground" Value="{StaticResource gradientBrush}"/>
    </Style>

    <DropShadowEffect x:Key="eff" Color="Black" ShadowDepth="3" Direction="-90" BlurRadius="2"/>

    <DropShadowEffect x:Key="deep" Color="Black" ShadowDepth="7" Direction="-90" BlurRadius="9"/>

    <Style x:Key="numberStyle" TargetType="TextBlock">
        <Setter Property="Effect" Value="{StaticResource smeff}"/>
        <Setter Property="FontSize" Value="40"/>
        <Setter Property="FontFamily" Value="../chrono/BebasNeue.otf#Bebas Neue"/>
        <Setter Property="Foreground" Value="{StaticResource gradientBrush}"/>
    </Style>

    <Style TargetType="simple:SimpleClock">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="simple:SimpleClock">
                    <Viewbox Stretch="Uniform">
                        <Grid x:Name="SimpleClockGrid" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <Ellipse HorizontalAlignment="Center" VerticalAlignment="Center" Width="280" Height="280" >
                                <Ellipse.Fill>
                                    <LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
                                        <GradientStop Color="White" Offset="0" />
                                        <GradientStop Color="LightGray" Offset="0.08" />
                                        <GradientStop Color="LightGray" Offset="0.4" />
                                        <GradientStop Color="Black" Offset="0.4" />
                                        <GradientStop Color="Gray" Offset="0.6" />
                                        <GradientStop Color="White" Offset="0.8" />
                                        <GradientStop Color="Black" Offset="1" />
                                    </LinearGradientBrush>
                                </Ellipse.Fill>
                                <Ellipse.Effect>
                                    <DropShadowEffect BlurRadius="25" Color="Black" Direction="0" ShadowDepth="0" Opacity="1" />
                                </Ellipse.Effect>
                            </Ellipse>
                            <Ellipse HorizontalAlignment="Center" VerticalAlignment="Center" Width="260" Height="260" StrokeThickness="4">
                                <Ellipse.Stroke>
                                    <LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
                                        <GradientStop Color="DarkGray" Offset="0" />
                                        <GradientStop Color="#FF484848" Offset="0.5" />
                                        <GradientStop Color="Gray" Offset="0.8" />
                                        <GradientStop Color="DarkGray" Offset="1" />
                                    </LinearGradientBrush>
                                </Ellipse.Stroke>
                                <Ellipse.Fill>
                                    <RadialGradientBrush GradientOrigin="0.5,0">
                                        <GradientStop Color="{Binding ClockGradientTop, FallbackValue=White}" Offset="0" />
                                        <GradientStop Color="{Binding ClockGradientTop, FallbackValue=White}" Offset="0.6" />
                                        <GradientStop Color="{Binding ClockGradientBottom, FallbackValue=#FFCECECE}" Offset="0.89"/>
                                        <GradientStop Color="#FF6C6C6C" Offset="0.99"/>
                                    </RadialGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>

                            <TextBlock Text="{TemplateBinding ClockLabel}" Foreground="{TemplateBinding ClockLabelColor}" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,80" />

                            <Ellipse x:Name="bigLines" StrokeDashArray="0.1 3.24" HorizontalAlignment="Center" VerticalAlignment="Center" Width="220" Height="220" Stroke="{Binding BigLinesColor, FallbackValue=#FF000000}" StrokeThickness="16" StrokeEndLineCap="Round">
                                <Ellipse.RenderTransform>
                                    <RotateTransform Angle="89" CenterX="110" CenterY="110" />
                                </Ellipse.RenderTransform>
                            </Ellipse>

                            <Ellipse x:Name="smallLines" HorizontalAlignment="Center" VerticalAlignment="Center" Width="220" Height="220" Stroke="{Binding SmallLinesColor, FallbackValue=Gray}" StrokeThickness="10" StrokeDashArray="0.05 0.25" StrokeEndLineCap="Round" />

                            <Canvas x:Name="arabicNumbers" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="200">
                                <TextBlock x:Name="num1"  Text="1" FontSize="20" Foreground="{TemplateBinding NumberColor}" Canvas.Left="135" Canvas.Top="17" />
                                <TextBlock x:Name="num2" Text="2" FontSize="20" Foreground="{TemplateBinding NumberColor}" Canvas.Left="167" Canvas.Top="48" />
                                <TextBlock x:Name="num3" Text="3" FontSize="20" Foreground="{TemplateBinding NumberColor}" Canvas.Left="178" Canvas.Top="87" />
                                <TextBlock x:Name="num4" Text="4" FontSize="20" Foreground="{TemplateBinding NumberColor}" Canvas.Left="167" Canvas.Top="127" />
                                <TextBlock x:Name="num5" Text="5" FontSize="20" Foreground="{TemplateBinding NumberColor}" Canvas.Left="135" Canvas.Top="157" />
                                <TextBlock x:Name="num6" Text="6" FontSize="20" Foreground="{TemplateBinding NumberColor}" Canvas.Left="95" Canvas.Top="167" />
                                <TextBlock x:Name="num7" Text="7" FontSize="20" Foreground="{TemplateBinding NumberColor}" Canvas.Left="55" Canvas.Top="159" />
                                <TextBlock x:Name="num8" Text="8" FontSize="20" Foreground="{TemplateBinding NumberColor}" Canvas.Left="25" Canvas.Top="132" />
                                <TextBlock x:Name="num9" Text="9" FontSize="20" Foreground="{TemplateBinding NumberColor}" Canvas.Left="11" Canvas.Top="89" />
                                <TextBlock x:Name="num10" Text="10" FontSize="20" Foreground="{TemplateBinding NumberColor}" Canvas.Left="22" Canvas.Top="50" />
                                <TextBlock x:Name="num11" Text="11" FontSize="20" Foreground="{TemplateBinding NumberColor}" Canvas.Left="45" Canvas.Top="17" />
                                <TextBlock x:Name="num12" Text="12" Canvas.Left="87" Canvas.Top="9" FontSize="20" Foreground="{TemplateBinding NumberColor}" />
                            </Canvas>

                            <Canvas x:Name="romanNumbers"  Visibility="Collapsed" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="200">
                                <TextBlock x:Name="rnum1"  Text="I" FontSize="20" Foreground="{TemplateBinding NumberColor}" Canvas.Left="140" Canvas.Top="17" />
                                <TextBlock x:Name="rnum2" Text="I" FontSize="20" Foreground="{TemplateBinding NumberColor}" Canvas.Left="167" Canvas.Top="48" />
                                <TextBlock x:Name="rnum3" Text="III" FontSize="20" Foreground="{TemplateBinding NumberColor}" Canvas.Left="165" Canvas.Top="87" />
                                <TextBlock x:Name="rnum4" Text="IV" FontSize="20" Foreground="{TemplateBinding NumberColor}" Canvas.Left="155" Canvas.Top="127" />
                                <TextBlock x:Name="rnum5" Text="V" FontSize="20" Foreground="{TemplateBinding NumberColor}" Canvas.Left="135" Canvas.Top="154" />
                                <TextBlock x:Name="rnum6" Text="VI" FontSize="20" Foreground="{TemplateBinding NumberColor}" Canvas.Left="94" Canvas.Top="164" />
                                <TextBlock x:Name="rnum7" Text="VII" FontSize="20" Foreground="{TemplateBinding NumberColor}" Canvas.Left="52" Canvas.Top="155" />
                                <TextBlock x:Name="rnum8" Text="VIII" FontSize="20" Foreground="{TemplateBinding NumberColor}" Canvas.Left="22" Canvas.Top="125" />
                                <TextBlock x:Name="rnum9" Text="IX" FontSize="20" Foreground="{TemplateBinding NumberColor}" Canvas.Left="11" Canvas.Top="89" />
                                <TextBlock x:Name="rnum10" Text="X" FontSize="20" Foreground="{TemplateBinding NumberColor}" Canvas.Left="22" Canvas.Top="50" />
                                <TextBlock x:Name="rnum11" Text="XI" FontSize="20" Foreground="{TemplateBinding NumberColor}" Canvas.Left="50" Canvas.Top="17" />
                                <TextBlock x:Name="rnum12" Text="XII" Canvas.Left="90" Canvas.Top="9" FontSize="20" Foreground="{TemplateBinding NumberColor}" />
                            </Canvas>

                            <!-- Hour Hand -->

                            <Grid x:Name="HourHand" RenderTransformOrigin="0.5,0.5" Width="280" Height="280">
                                <Grid.Effect>
                                    <DropShadowEffect BlurRadius="10" ShadowDepth="0" Color="Black" Direction="0" Opacity="0.5" />
                                </Grid.Effect>
                                <Grid.RenderTransform>
                                    <RotateTransform x:Name="hourHandRotation" />
                                </Grid.RenderTransform>
                                <Path Stroke="#FF000000" Width="10" Height="125" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,60,0,0" StrokeThickness="2" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M103.2548,214 L93.333336,383.33301 L112.38036,383.26743 z" Fill="#FF000000" Stretch="Fill" UseLayoutRounding="False"/>
                            </Grid>

                            <!-- Minute Hand -->
                            <Grid x:Name="MinuteHand" RenderTransformOrigin="0.5,0.5" Width="280" Height="280">
                                <Grid.Effect>
                                    <DropShadowEffect BlurRadius="10" ShadowDepth="0" Color="Black" Direction="0" Opacity="0.5" />
                                </Grid.Effect>
                                <Grid.RenderTransform>
                                    <RotateTransform x:Name="minuteHandRotation" />
                                </Grid.RenderTransform>
                                <Path Stroke="#FF000000" Width="10" Height="145" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,40,0,0" StrokeThickness="2" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M103.2548,214 L93.333336,383.33301 L112.38036,383.26743 z" Fill="#FF000000" Stretch="Fill" UseLayoutRounding="False"/>
                            </Grid>

                            <!-- seconds hand -->

                            <Grid x:Name="SecondHand" RenderTransformOrigin="0.5,0.5" Width="280" Height="280" >
                                <Grid.Effect>
                                    <DropShadowEffect BlurRadius="10" ShadowDepth="0" Color="Black" Direction="0" Opacity="0.5" />
                                </Grid.Effect>
                                <Grid.RenderTransform>
                                    <RotateTransform x:Name="secondHandRotation" />
                                </Grid.RenderTransform>
                                <Path Stroke="{TemplateBinding HandColor}" Width="7" Height="135" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,50,0,0" StrokeThickness="2" StrokeEndLineCap="Round" StrokeLineJoin="Round" Data="M103.2548,214 L93.333336,383.33301 L112.38036,383.26743 z" Fill="{TemplateBinding HandColor}" Stretch="Fill" UseLayoutRounding="False"/>
                            </Grid>


                            <!-- screw holding together the hands -->
                            <Ellipse HorizontalAlignment="Stretch" VerticalAlignment="Stretch" StrokeThickness="4" Width="25" Height="25" >
                                <Ellipse.Effect>
                                    <DropShadowEffect BlurRadius="15" Color="Black" Direction="0" ShadowDepth="0" Opacity="1" />
                                </Ellipse.Effect>
                                <Ellipse.Fill>
                                    <RadialGradientBrush GradientOrigin="1,0">
                                        <GradientStop Color="Gray" Offset="0" />
                                        <GradientStop Color="Black" Offset="1" />
                                    </RadialGradientBrush>
                                </Ellipse.Fill>
                                <Ellipse.Stroke>
                                    <LinearGradientBrush StartPoint="1,0" EndPoint="1,1">
                                        <GradientStop Color="Gray" Offset="0" />
                                        <GradientStop Color="Black" Offset="0.2" />
                                        <GradientStop Color="Black" Offset="0.6" />
                                        <GradientStop Color="Gray" Offset="1" />
                                    </LinearGradientBrush>
                                </Ellipse.Stroke>
                            </Ellipse>

                            <!-- Shine -->
                            <Ellipse x:Name="shine" Width="250" Height="250" Opacity="0.7" >
                                <Ellipse.Fill>
                                    <LinearGradientBrush StartPoint="1,0">
                                        <GradientStop Offset="0" Color="#FFFFFFFF"/>
                                        <GradientStop Offset="0.8" Color="Transparent"/>
                                    </LinearGradientBrush>
                                </Ellipse.Fill>
                                <Ellipse.Clip>
                                    <EllipseGeometry RadiusX="190" RadiusY="160" />
                                </Ellipse.Clip>
                                <Ellipse.RenderTransform>
                                    <RotateTransform Angle="48" CenterX="125" CenterY="125"/>
                                </Ellipse.RenderTransform>
                            </Ellipse>
                        </Grid>
                    </Viewbox>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="chrono:ChronoFrame">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="chrono:ChronoFrame">
                    <Viewbox Stretch="Uniform">
                        <Grid>
                            <Grid Width="330" Height="330" Margin="0,20,0,0">
                                
                                <chrono:ChronoButton Tag="rightTop" x:Name="chronoBtnRightTop" Margin="0,30,30,0" HorizontalAlignment="Right" VerticalAlignment="Top" >
                                    <chrono:ChronoButton.RenderTransform>
                                        <RotateTransform Angle="45" CenterX="40" CenterY="40"/>
                                    </chrono:ChronoButton.RenderTransform>
                                    <chrono:ChronoButton.Effect>
                                        <DropShadowEffect BlurRadius="15" Direction="-45" ShadowDepth="5" Color="Black" />
                                    </chrono:ChronoButton.Effect>
                                </chrono:ChronoButton>

                                <chrono:ChronoButton Tag="leftTop" x:Name="chronoBtnLeftTop" Margin="12,10,30,0" HorizontalAlignment="Left" VerticalAlignment="Top">
                                    <chrono:ChronoButton.RenderTransform>
                                        <RotateTransform Angle="310" CenterX="30" CenterY="30"/>
                                    </chrono:ChronoButton.RenderTransform>
                                    <chrono:ChronoButton.Effect>
                                        <DropShadowEffect BlurRadius="15" Direction="245" ShadowDepth="5" Color="Black" />
                                    </chrono:ChronoButton.Effect>
                                </chrono:ChronoButton>


                                <chrono:ChronoButton Tag="leftBottom" x:Name="chronoBtnLeftBottom" Margin="2,0,35,35" HorizontalAlignment="Left" VerticalAlignment="Bottom">
                                    <chrono:ChronoButton.RenderTransform>
                                        <RotateTransform Angle="225" CenterX="30" CenterY="30"/>
                                    </chrono:ChronoButton.RenderTransform>
                                    <chrono:ChronoButton.Effect>
                                        <DropShadowEffect BlurRadius="15" Direction="180" ShadowDepth="5" Color="Black" />
                                    </chrono:ChronoButton.Effect>
                                </chrono:ChronoButton>

                                <chrono:ChronoButton Tag="rightBottom" x:Name="chronoBtnRightBottom" Margin="0,0,60,30" HorizontalAlignment="Right" VerticalAlignment="Bottom">
                                    <chrono:ChronoButton.RenderTransform>
                                        <RotateTransform Angle="135" CenterX="40" CenterY="40"/>
                                    </chrono:ChronoButton.RenderTransform>
                                    <chrono:ChronoButton.Effect>
                                        <DropShadowEffect BlurRadius="15" Direction="0" ShadowDepth="5" Color="Black" />
                                    </chrono:ChronoButton.Effect>
                                </chrono:ChronoButton>
                               
                            </Grid>


                            <!--<controls:RenamingControl Margin="0,0,0,97" />-->
                            <StackPanel HorizontalAlignment="Center"></StackPanel>

                            <chrono:ChronometerWatch x:Name="chronoWatch" HorizontalAlignment="Center" VerticalAlignment="Center" />

                            <Grid>
                                <Ellipse Width="300" Height="300" StrokeThickness="27">
                                    <Ellipse.Effect>
                                        <DropShadowEffect Color="#FF000000" BlurRadius="8" Direction="-90" ShadowDepth="8"/>
                                    </Ellipse.Effect>
                                    <Ellipse.Stroke>
                                        <LinearGradientBrush StartPoint="1,0">
                                            <GradientStop Offset="0" Color="#FF000000"/>
                                            <GradientStop Offset="0.1" Color="#FF000000"/>
                                            <GradientStop Offset="0.5" Color="#FF000000"/>
                                            <GradientStop Offset="1" Color="#FF626262"/>
                                        </LinearGradientBrush>
                                    </Ellipse.Stroke>
                                </Ellipse>
                            </Grid>

                            <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                                <Ellipse Width="300" Height="300" StrokeThickness="27">
                                    <Ellipse.Effect>
                                        <DropShadowEffect Color="#FF000000" BlurRadius="8" Direction="-90" ShadowDepth="8"/>
                                    </Ellipse.Effect>
                                    <Ellipse.Stroke>
                                        <LinearGradientBrush StartPoint="1,0">
                                            <GradientStop Offset="0" Color="Gray"/>
                                            <GradientStop Offset="0.1" Color="Gray"/>
                                            <GradientStop Offset="0.5" Color="#FF626262"/>
                                            <GradientStop Offset="1" Color="#FF626262"/>
                                        </LinearGradientBrush>
                                    </Ellipse.Stroke>
                                    <Ellipse.Clip>
                                        <EllipseGeometry RadiusX="210" RadiusY="210"/>
                                    </Ellipse.Clip>
                                </Ellipse>
                            </Grid>

                            <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                <Ellipse Opacity="0.4" StrokeDashArray="0.1 0.857" Stroke="#FFFFFFFF" StrokeThickness="15" Width="280" Height="280"/>
                                <Ellipse Opacity="1" StrokeDashOffset="1" StrokeDashArray="1 28" Stroke="#FFFFFFFF" StrokeThickness="15" Width="280" Height="280">
                                    <Ellipse.RenderTransform>
                                        <RotateTransform Angle="85.5" CenterX="140" CenterY="140" />
                                    </Ellipse.RenderTransform>
                                </Ellipse>

                                <Ellipse Opacity="1" StrokeDashOffset="1" StrokeDashArray="1 28" Stroke="#FFFFFFFF" StrokeThickness="15" Width="280" Height="280">
                                    <Ellipse.RenderTransform>
                                        <RotateTransform Angle="175.5" CenterX="140" CenterY="140" />
                                    </Ellipse.RenderTransform>
                                </Ellipse>

                                <Ellipse Opacity="1" StrokeDashOffset="1" StrokeDashArray="1 28" Stroke="#FFFFFFFF" StrokeThickness="15" Width="280" Height="280">
                                    <Ellipse.RenderTransform>
                                        <RotateTransform Angle="265.5" CenterX="140" CenterY="140" />
                                    </Ellipse.RenderTransform>
                                </Ellipse>

                                <Ellipse Opacity="1" StrokeDashOffset="1" StrokeDashArray="1 28" Stroke="#FFFFFFFF" StrokeThickness="15" Width="280" Height="280">
                                    <Ellipse.RenderTransform>
                                        <RotateTransform Angle="355.5" CenterX="140" CenterY="140" />
                                    </Ellipse.RenderTransform>
                                </Ellipse>
                            </Grid>

                            <!-- numbers -->

                            <Grid Opacity="0.8" Width="315" Height="320" Margin="5,7,0,0">
                                <TextBlock Style="{StaticResource outerNumbers}" Text="10" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="5,70,20,50">
                                <TextBlock.RenderTransform>
                                    <RotateTransform Angle="60" CenterX="10" CenterY="10"/>
                                </TextBlock.RenderTransform>
                                </TextBlock>

                                <TextBlock Style="{StaticResource outerNumbers}" Text="20" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="10,50,20,60">
                                <TextBlock.RenderTransform>
                                    <RotateTransform Angle="122" CenterX="10" CenterY="10"/>
                                </TextBlock.RenderTransform>
                                </TextBlock>

                                <TextBlock Style="{StaticResource outerNumbers}" Text="40" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="25,50,30,60">
                                <TextBlock.RenderTransform>
                                    <RotateTransform Angle="240" CenterX="10" CenterY="10"/>
                                </TextBlock.RenderTransform>
                                </TextBlock>

                                <TextBlock Style="{StaticResource outerNumbers}" Text="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20,78,25,60">
                                <TextBlock.RenderTransform>
                                    <RotateTransform Angle="302" CenterX="10" CenterY="10"/>
                                </TextBlock.RenderTransform>
                                </TextBlock>
                            </Grid>
                        </Grid>
                    </Viewbox>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="chrono:ChronometerWatch">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="chrono:ChronometerWatch">
                    <Viewbox Stretch="Uniform">
                        <Grid>
                            <Grid>
                                <Grid x:Name="xamlChrono" HorizontalAlignment="Center" VerticalAlignment="Center">
                                    <Ellipse x:Name="chronoBg" Width="250" Height="250">
                                        <Ellipse.Fill>
                                            <RadialGradientBrush GradientOrigin="1,0" >
                                                <GradientStop Offset="0" Color="#FF3B3939"/>
                                                <GradientStop Offset="0.5" Color="#FF343434"/>
                                                <GradientStop Offset="1" Color="Black"/>
                                            </RadialGradientBrush>
                                        </Ellipse.Fill>
                                    </Ellipse>

                                    <Ellipse Opacity="1" StrokeDashArray="0.1 1.1" Stroke="#FFFFFFFF" StrokeThickness="10" Width="235" Height="235"/>
                                    <Ellipse Opacity="0.5" StrokeDashArray="0.1 1" Stroke="#FFFFFFFF" StrokeThickness="3" Width="235" Height="235"/>

                                    <!-- hours -->

                                    <Ellipse StrokeDashOffset="20" StrokeDashArray="0.4 2.41" Stroke="{StaticResource gradientBrush}" Effect="{StaticResource eff}" StrokeThickness="20" Width="235" Height="235">
                                        <Ellipse.RenderTransform>
                                            <RotateTransform Angle="2" CenterX="100" CenterY="100" />
                                        </Ellipse.RenderTransform>
                                    </Ellipse>

                                    <!-- end hours -->
                                    <chrono:MiniClockSecond x:Name="miniClockSeconds" Margin="0,0,120,0"/>

                                    <chrono:MiniClockHour x:Name="miniClockHours" Margin="0,120,0,0" />

                                    <chrono:MiniClockMinute x:Name="miniClockMinutes" Margin="0,0,0,120"/>

                                    <Canvas x:Name="numCanvas" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                        <TextBlock HorizontalAlignment="Center" Text="1" Style="{StaticResource numberStyle}" Canvas.Left="160" Canvas.Top="37" />
                                        <TextBlock Canvas.Left="191" Canvas.Top="66" Style="{StaticResource numberStyle}" Text="2" />
                                        <TextBlock Canvas.Left="191" Canvas.Top="131" Style="{StaticResource numberStyle}" Text="4" />
                                        <TextBlock Canvas.Left="160" Canvas.Top="167" Style="{StaticResource numberStyle}" Text="5" />
                                        <TextBlock Canvas.Left="70" Canvas.Top="167" Style="{StaticResource numberStyle}" Text="7" />
                                        <TextBlock Canvas.Left="70" Canvas.Top="30" Style="{StaticResource numberStyle}" Text="11" />
                                        <TextBlock Canvas.Left="40" Canvas.Top="66" Style="{StaticResource numberStyle}" Text="10" />
                                        <TextBlock Canvas.Left="40" Canvas.Top="131" Style="{StaticResource numberStyle}" Text="8" />
                                        <TextBlock Canvas.Left="145" Canvas.Top="128"  FontSize="8" Foreground="#FFFFFFFF" Style="{StaticResource numberStyle}" Text="{TemplateBinding BottomLabel}">
                                    <TextBlock.Effect>
                                        <DropShadowEffect Color="Black" ShadowDepth="2" Direction="-90" BlurRadius="2"/>
                                    </TextBlock.Effect>
                                        </TextBlock>
                                        <TextBlock Canvas.Left="145" Canvas.Top="110" FontFamily="../chrono/SF Square Head Bold.ttf#SF Square Head"  FontSize="15.5" Foreground="#FFFFFFFF" Style="{StaticResource numberStyle}" Text="{TemplateBinding TopLabel}">
                                    <TextBlock.Effect>
                                        <DropShadowEffect Color="Black" ShadowDepth="2" Direction="-90" BlurRadius="2"/>
                                    </TextBlock.Effect>
                                        </TextBlock>

                                    </Canvas>

                                    <!-- End Numbers -->

                                    <!-- needles -->
                                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

                                         <Grid x:Name="xamlMinuteNeedles" Effect="{StaticResource deep}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                            <Grid>
                                                <Path Margin="0,0,0,100" Height="90" Stretch="Fill" Width="12" Data="M40,56 L64.000046,23.999605 L88.000092,55.999649 L88.000092,320 L40,320 z" >
                                                    <Path.Fill>
                                                        <LinearGradientBrush StartPoint="1,0">
                                                            <GradientStop Offset="0" Color="#FFFFFFFF"/>
                                                            <GradientStop Offset="02" Color="#FFDEDEDE"/>
                                                            <GradientStop Offset="0.5" Color="#FFDEDEDE"/>
                                                            <GradientStop Offset="0.5" Color="#FFFFFFFF"/>
                                                        </LinearGradientBrush>
                                                    </Path.Fill>
                                                </Path>
                                                <Border Background="#FF000000" CornerRadius="0,0,5,5" Width="15" Height="50" />
                                                <Grid.RenderTransform>
                                                    <RotateTransform x:Name="minuteHand" Angle="0" CenterX="125" CenterY="125"/>
                                                </Grid.RenderTransform>
                                            </Grid>
                                        </Grid>

                                        <Grid x:Name="xamlHourNeedles" Effect="{StaticResource deep}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                            <Grid>
                                                <Path Margin="0,0,0,70" Height="90" Stretch="Fill" Width="12" Data="M40,56 L64.000046,23.999605 L88.000092,55.999649 L88.000092,320 L40,320 z" >
                                                    <Path.Fill>
                                                        <LinearGradientBrush StartPoint="1,0">
                                                            <GradientStop Offset="0" Color="#FFFFFFFF"/>
                                                            <GradientStop Offset="02" Color="#FFDEDEDE"/>
                                                            <GradientStop Offset="0.5" Color="#FFDEDEDE"/>
                                                            <GradientStop Offset="0.5" Color="#FFFFFFFF"/>
                                                        </LinearGradientBrush>
                                                    </Path.Fill>
                                                </Path>
                                                <Border Background="#FF000000" CornerRadius="0,0,5,5" Width="15" Height="50" />
                                                <Grid.RenderTransform>
                                                    <RotateTransform x:Name="hourHand" Angle="0" CenterX="125" CenterY="125"/>
                                                </Grid.RenderTransform>
                                            </Grid>
                                        </Grid>

                                        <Grid x:Name="secondNeedle">
                                            <Grid x:Name="xamlRedNeedleBall" HorizontalAlignment="Stretch" Effect="{StaticResource deep}" VerticalAlignment="Stretch">
                                                <Grid>
                                                    <Rectangle x:Name="redNeedle" Fill="{TemplateBinding HandColor}" Width="150" Height="4" Margin="85,0,0,0"/>
                                                    <Ellipse Stroke="{TemplateBinding HandColor}" Margin="125,0,0,0" Fill="#FFFFFFFF" StrokeThickness="2" Width="15" Height="15"/>
                                                    <Grid.RenderTransform>
                                                        <RotateTransform Angle="270" CenterX="125" CenterY="125" />
                                                    </Grid.RenderTransform>
                                                </Grid>
                                            </Grid>
                                            <Grid.RenderTransform>
                                                <RotateTransform x:Name="secondHand" Angle="0" CenterX="125" CenterY="125"/>
                                            </Grid.RenderTransform>
                                        </Grid>

                                        <!-- circles -->

                                        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                            <Ellipse x:Name="outerCircle" Effect="{StaticResource deep}" Height="30" Width="30" HorizontalAlignment="Center" VerticalAlignment="Center" >
                                                <Ellipse.Fill>
                                                    <RadialGradientBrush GradientOrigin="1,0">
                                                        <GradientStop Offset="0" Color="Gray"/>
                                                        <GradientStop Offset="1" Color="#FF000000"/>
                                                    </RadialGradientBrush>
                                                </Ellipse.Fill>
                                            </Ellipse>
                                            <Ellipse x:Name="middleCircle" Fill="#FF000000" Height="20" Width="20" HorizontalAlignment="Center" VerticalAlignment="Center" />
                                        </Grid>

                                    </Grid>


                                    <!-- end needles -->

                                    <!----><Ellipse x:Name="shine" Width="250" Height="250" Opacity="0.3">
                                            <Ellipse.Fill>
                                                <LinearGradientBrush StartPoint="1,0">
                                                    <GradientStop Offset="0" Color="#FFFFFFFF"/>
                                                    <GradientStop Offset="0.8" Color="Transparent"/>
                                                </LinearGradientBrush>
                                            </Ellipse.Fill>
                                            <Ellipse.Clip>
                                                <EllipseGeometry RadiusX="190" RadiusY="160" />
                                            </Ellipse.Clip>
                                        </Ellipse>

                                </Grid>
                            </Grid>
                        </Grid>
                    </Viewbox>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="chrono:MiniClockHour">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="chrono:MiniClockHour">
                    <Grid Width="60" Height="60">
          <Grid x:Name="bottomMiniClock" >
            <Ellipse Width="60" Height="60">
                <Ellipse.Fill>
                    <RadialGradientBrush GradientOrigin="0.5,2" >
                        <GradientStop Offset="0" Color="#FF3E3E3E"/>
                        <GradientStop Offset="1" Color="#FF0D0D0D"/>
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse Opacity="0.6" StrokeDashArray="0.1 1.1" Stroke="#FFFFFFFF" Width="55" Height="55" StrokeThickness="10">
                <Ellipse.RenderTransform>
                    <RotateTransform Angle="-5" CenterX="26" CenterY="30"/>
                </Ellipse.RenderTransform>
            </Ellipse>
            <TextBlock Text="12" Margin="0,12,0,0" Style="{StaticResource smNumberStyle}" HorizontalAlignment="Center" VerticalAlignment="Top"/>
            <TextBlock Text="3" Margin="0,0,13,0" Style="{StaticResource smNumberStyle}" HorizontalAlignment="Right" VerticalAlignment="Center"/>
            <TextBlock Text="6" Margin="0,0,0,12" Style="{StaticResource smNumberStyle}" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
            <TextBlock Text="9" Margin="13,0,0,0" Style="{StaticResource smNumberStyle}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
        </Grid>

        <Grid>
            <Grid x:Name="smallNeedle" Effect="{StaticResource smdeep}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <Grid>
                    <Rectangle Margin="25,0,0,0" Fill="{TemplateBinding HandColor}" Height="2" Width="30" />
                    <Ellipse Width="8" Height="8" Fill="#FF000000"/>
                    <Grid.RenderTransform>
                        <RotateTransform Angle="270" CenterX="30" CenterY="30"/>
                    </Grid.RenderTransform>
                </Grid>
            </Grid>
            <Grid.RenderTransform>
                <RotateTransform x:Name="miniClockHourHand" CenterX="30" CenterY="30"/>
            </Grid.RenderTransform>
        </Grid>                
                        
    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="chrono:MiniClockSecond">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="chrono:MiniClockSecond">
                    <Grid Width="60" Height="60">
       <Grid>
        <Ellipse Width="60" Height="60">
            <Ellipse.Fill>
                <RadialGradientBrush GradientOrigin="0.5,2" >
                    <GradientStop Offset="0" Color="#FF3E3E3E"/>
                    <GradientStop Offset="1" Color="#FF0D0D0D"/>
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
            <Ellipse Opacity="0.2" StrokeDashArray="0.1 1.09" Stroke="#FFFFFFFF" Width="55" Height="55" StrokeThickness="10">
                <Ellipse.RenderTransform>
                    <RotateTransform Angle="56" CenterX="27" CenterY="28"/>
                </Ellipse.RenderTransform>
            </Ellipse>
        <Ellipse Opacity="0.5" StrokeDashArray="0.1 0.3" Stroke="#FFFFFFFF" Width="55" Height="55" StrokeThickness="5"/>
        <TextBlock Text="60" Margin="0,12,0,0" Style="{StaticResource smNumberStyle}" HorizontalAlignment="Center" VerticalAlignment="Top"/>
        <TextBlock Text="15" Margin="0,0,13,0" Style="{StaticResource smNumberStyle}" HorizontalAlignment="Right" VerticalAlignment="Center"/>
        <TextBlock Text="30" Margin="0,0,0,12" Style="{StaticResource smNumberStyle}" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
        <TextBlock Text="45" Margin="13,0,0,0" Style="{StaticResource smNumberStyle}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
        </Grid>
                <Grid>
                    <Grid x:Name="hourNeedle" Effect="{StaticResource smdeep}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <Grid>
                            <Rectangle Margin="25,0,0,0" Fill="{TemplateBinding HandColor}" Height="2" Width="30" />
                            <Ellipse Width="8" Height="8" Fill="#FF000000"/>
                            <Grid.RenderTransform>
                                <RotateTransform Angle="270" CenterX="30" CenterY="30"/>
                            </Grid.RenderTransform>
                        </Grid>
                    </Grid>
                    <Grid.RenderTransform>
                         <RotateTransform x:Name="miniClockSecondHand" CenterX="30" CenterY="30"/>
                    </Grid.RenderTransform>
                </Grid>
                        
                </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="chrono:MiniClockMinute">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="chrono:MiniClockMinute">
                    <Grid Width="60" Height="60">
        <Grid>
            <Ellipse Width="60" Height="60">
                <Ellipse.Fill>
                    <RadialGradientBrush GradientOrigin="0.5,2" >
                        <GradientStop Offset="0" Color="#FF3E3E3E"/>
                        <GradientStop Offset="1" Color="#FF0D0D0D"/>
                    </RadialGradientBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse Opacity="0.6" StrokeDashArray="0.2 2.5" Stroke="#FFFFFFFF" Width="55" Height="55" StrokeThickness="9">
                <Ellipse.RenderTransform>
                    <RotateTransform Angle="26" CenterX="27" CenterY="28" />
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse Opacity="0.3" StrokeDashArray="0.1 1.215" Stroke="#FFFFFFFF" Width="55" Height="55" StrokeThickness="5"/>
            <TextBlock Text="30" Margin="0,12,0,0" Style="{StaticResource smNumberStyle}" HorizontalAlignment="Center" VerticalAlignment="Top"/>
            <TextBlock Text="5" Margin="0,-13,13,0" Style="{StaticResource smNumberStyle}" HorizontalAlignment="Right" VerticalAlignment="Center"/>
            <TextBlock Text="10" Margin="0,13,13,0" Style="{StaticResource smNumberStyle}" HorizontalAlignment="Right" VerticalAlignment="Center"/>
            <TextBlock Text="15" Margin="0,0,0,12" Style="{StaticResource smNumberStyle}" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
            <TextBlock Text="20" Margin="13,13,0,0" Style="{StaticResource smNumberStyle}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
            <TextBlock Text="25" Margin="13,-13,0,0" Style="{StaticResource smNumberStyle}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
        </Grid>
                    <Grid>
                        <Grid x:Name="minuteNeedle" Effect="{StaticResource smdeep}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <Grid>
                                <Rectangle Margin="25,0,0,0" Fill="{TemplateBinding HandColor}" Height="2" Width="30" />
                                <Ellipse Width="8" Height="8" Fill="#FF000000"/>
                                <Grid.RenderTransform>
                                    <RotateTransform Angle="270" CenterX="30" CenterY="30"/>
                                </Grid.RenderTransform>
                            </Grid>
                        </Grid>
                        <Grid.RenderTransform>
                            <RotateTransform x:Name="miniClockMinuteHand" CenterX="30" CenterY="30"/>
                        </Grid.RenderTransform>
                    </Grid>
                </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    
    <Style x:Key="chronoBtnStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="borderTrans" Storyboard.TargetProperty="Y" To="0" Duration="0:0:0.2"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="borderTrans" Storyboard.TargetProperty="Y" To="8" Duration="0:0:0.2"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border HorizontalAlignment="Center" VerticalAlignment="Bottom" Width="30" Height="40" CornerRadius="5" Background="{StaticResource buttonGradient}" >
                                <Border.RenderTransform>
                                    <TranslateTransform x:Name="borderTrans" Y="0" />
                                </Border.RenderTransform>
                            </Border>
                            <Border HorizontalAlignment="Center" VerticalAlignment="Bottom" Width="40" Height="30" Margin="0,15,0,0" CornerRadius="4" Background="{StaticResource buttonGradient}" />
                            <Rectangle VerticalAlignment="Bottom" HorizontalAlignment="Center" Width="40" Height="40" Margin="0,0,0,20" Fill="Transparent"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    <Style TargetType="chrono:ChronoButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="chrono:ChronoButton">
                    <Grid x:Name="chronoBtnGrid"  HorizontalAlignment="Right" VerticalAlignment="Bottom">
                        <Button x:Name="chronoBtn" Style="{StaticResource chronoBtnStyle}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>
